import { useState, useEffect, useRef } from 'react';
import { Button, Space } from 'antd';
import { Table, MF } from 'com';
import menuStore from 'store/menu';
import { AddEmergency, UpdateEmergency, DeleteEmergency, GetEmergencyList } from 'api/teacher';
import { asyncConfirm } from '@/utils/common';
import { useParams } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';

/**
 * 表单配置项
 */
const options = {
    contact_name: {
        title: '联系人姓名',
        max: 20,
        required: true,
    },
    contact_relation: {
        title: '联系人关系',
        max: 10,
        required: true
    },
    phone: {
        title: '手机号',
        max: 11,
        required: true,
        rules: [{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }]
    }
}

export default () => {
    const { id } = useParams();

    /**
     * 导航
     */
    const nav = useNavigate();
    /**
     * 列表
     */
    const [list, setList] = useState([]);
    /**
     * loading
     */
    const [loading, setLoading] = useState(false);
    /**
     * 紧急联系人信息
     */
    const [emergency, setEmergency] = useState({});
    /**
     * 添加MF引用
     */
    const addMF = useRef();
    /**
     * 列
     */
    const cols = [
        {
            title: '联系人姓名',
            dataIndex: 'contact_name',
            align: 'center'
        },
        {
            title: '联系人关系',
            dataIndex: 'contact_relation',
            align: 'center'
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            align: 'center'
        },
        {
            title: '操作',
            align: 'center',
            width: 200,
            render: (text, row) => <Space>
                {menuStore.auth('updateEmergency') && <Button type="link" size="small" onClick={() => {
                    setEmergency({ ...row });
                    addMF.current.show();
                }}>修改</Button>}
                {menuStore.auth('deleteEmergency') && <Button type="link" size="small" onClick={() => deleteEmergency(row)}>删除</Button>}
            </Space>
        }
    ]

    /**
     * 获取列表
     */
    const getList = async () => {
        try {
            setLoading(true);
            const list = await GetEmergencyList(id);
            setList(list);
        } catch (error) { }
        setLoading(false);
    }

    /**
     * 删除联系人
     * @param {*} row 
     */
    const deleteEmergency = async row => {
        let res;
        try {
            res = await asyncConfirm(`您确定要删除【${row.contact_name}】吗？`);
            await DeleteEmergency(row.id);
            getList();
        } catch (error) { }
        res && res.close();
    }

    menuStore.auth('emergency') && useEffect(() => {
        getList();
    }, []);

    /**
     * 提交
     * @param {*} values 
     */
    const confirm = async values => {
        addMF.current.start();
        try {
            await (emergency.id ? UpdateEmergency : AddEmergency)({ teacher_id: id, ...values, id: emergency.id });
            getList();
            addMF.current.hide();
        } catch (error) { }
        addMF.current.stop();
    }

    return <div>
        <h3>教师紧急联系人管理</h3>
        <hr />
        <Space>
            <Button type="primary" onClick={() => nav('/teachers')}>返回教师列表</Button>
            {menuStore.auth('addEmergency') && <Button type="primary" onClick={() => {
                setEmergency({});
                addMF.current.show();
            }}>添加联系人</Button>}
        </Space>
        <p></p>
        {menuStore.auth('emergency') && <Table cols={cols} data={list} loading={loading} />}
        {menuStore.auth('addEmergency', 'updateEmergency') && <MF onFinish={confirm} ref={addMF} options={options} title={emergency.id ? '修改联系人' : '添加联系人'} lw={100} values={emergency} />}
    </div>
}